<template>
  <v-dialog
    :value="value"
    persistent
    max-width="290"
  >
    <v-card>
      <v-card-title>
        <v-text-field
          v-model="internalValue"
          class="v-input--text-right"
          type="string"
          dense
          single-line
          outlined
          readonly
          hide-details
        >
          <template v-slot:append>
            <v-icon small style="margin-top: 2px;margin-left: 5px;" @click="clear()">$close</v-icon>
          </template>
        </v-text-field>
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="3">
            <v-btn block @click="input('1')">1</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('2')">2</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('3')">3</v-btn>
          </v-col>
          <v-col cols="3"></v-col>
          <v-col cols="3">
            <v-btn block @click="input('4')">4</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('5')">5</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('6')">6</v-btn>
          </v-col>
          <v-col cols="3"></v-col>
          <v-col cols="3">
            <v-btn block @click="input('7')">7</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('8')">8</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('9')">9</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn plain block @click="close()">关闭</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('0')">0</v-btn>
          </v-col>
          <v-col cols="3">
            <v-btn block @click="input('.')">.</v-btn>
          </v-col>
          <v-col cols="3" offset="3">
            <v-btn color="primary" block @click="done()">确认</v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class AppNumberKeyboardDialog extends Vue {
  @Prop({ type: Boolean, default: true })
  public value!: boolean

  @Prop({ type: Number, required: true })
  public number!: string | number

  internalValue = '' + this.number
  reset = false

  @Watch('value')
  onShow (value: boolean) {
    console.log('show=>', value)
    if (value) {
      this.internalValue = '' + this.number
      this.reset = true
    }
  }

  clear () {
    this.internalValue = '0'
    this.reset = true
  }

  close () {
    this.$emit('input', false)
  }

  done () {
    this.$emit('change', parseFloat(this.internalValue))
    this.$emit('input', false)
  }

  input (v: string) {
    if ((this.reset || this.internalValue === '') && v === '.') {
      v = '0.'
    }
    if (this.reset) {
      this.internalValue = v
      this.reset = false
    } else {
      this.internalValue = this.internalValue + v
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
